$('document').ready(function () {
    // 加载页面时触发的事件
    if(getCookie('code')==200 || getCookie('code')==201 || getCookie('code')==202 || getCookie('code')==203){
        window.location.href='home.html'
    }
    var user_tab=-1  //用户登陆框切换保存输入信息
    // user-input框事件
    $('#login-content').on('mouseover',function(){
        $('#user-input').blur(function () {
            if ($('#user-input').val() == '') {
                $('#user-input').css({
                    'border': '2px solid red',
                })
                $('#user-input').prop('placeholder', '账号不能为空!')
            }else {
                $('#user-input').css('border','2px solid green')
                user_tab=$(this).val()
            }
        })
        $('#user-input').keyup(function () {
            if ($('#user-input').val() == '') {
                $('#user-input').prop('placeholder', '账号不能为空!')
                $('#user-input').css('border','2px solid red')
            }else {
                $('#user-input').css('border','2px solid green')
            }
        })
    })
    
    // emial-input框事件
    var emailzz = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
    $('#email-input').blur(function () {
        if ($('#email-input').val() == '') {
            $('#email-input').css({
                'border': '2px solid red',
            })
            $('#email-input').prop('placeholder', '邮箱不能为空!')
        } else if (!emailzz.test($('#email-input').val())) {
            $('#email-input').prop('placeholder', '邮箱格式错误!')
            $('#email-input').val('')
        } else {
            $('#email-input').css('border','2px solid green')
            user_tab=$(this).val()
        }
    })
    $('#email-input').keyup(function () {
        if (emailzz.test($('#email-input').val())) {
            $('#email-input').css('border','2px solid green')
        } else if (!emailzz.test($('#email-input').val())) {
            $('#email-input').prop('placeholder', '邮箱格式错误!')
            $('#email-input').css('border','2px solid red')
        }
    })
    // password-input框事件
    $('#password-input').blur(function () {
        if ($('#password-input').val() == '') {
            $('#password-input').css({
                'border': '2px solid red',
            })
            $('#password-input').prop('placeholder', '密码不能为空!')
            $('#checkpsw').css('cursor','auto')
        } else if ($('#password-input').val().length < 9 && $('#password-input').val().length > 0) {
            $('#password-input').css('border','2px solid green')
            $('#checkpsw').css('cursor','pointer')
        }
    })
    $('#password-input').keyup(function () {
        if ($('#password-input').val().length < 9 && $('#password-input').val().length > 0) {
            $('#checkpsw').css('cursor','pointer')
            $('#password-input').css('border','2px solid green')
        }else {
            $('#checkpsw').css('cursor','auto')
            $('#password-input').prop('placeholder', '密码不能为空!')
            $('#password-input').css('border','2px solid red')
        }

    })
    // 查看密码
    $('#checkpsw').click(function(){
        if ($('#password-input').attr('type')=='password') {
            $('#password-input').attr('type','text')
        }else if($('#password-input').attr('type')=='text'){
            $('#password-input').attr('type','password')
        }
    })
    // -------------------------------------------------------------
    // 切换页面
    $('#register-tab').click(function(){
        window.location.href='register.html'
    })
    // 验证码
    var show_num = [];
    $(function () {
        draw(show_num);//加载验证码
        $("#canvas").on('click', function () {
            draw(show_num);
        })
    })
    function draw(show_num) {
        var context = canvas.getContext("2d");//获取canvas画图的环境
        canvas.width = $('#canvas').width()
        canvas.height = $('#canvas').height()
        var sCode = "1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度
 
        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt;
            var x = 20 + i * 15;//文字在canvas上的x坐标
            var y = 26;//文字在canvas上的y坐标
            
            context.translate(x, y);
            context.font='20px Aria'
            context.fillText(txt, 0, 0);
            context.translate(-x, -y);
        }
    }
    $("#canvas-code").bind({
        keyup:(function(){
            if ($(this).val().length ==4) {
                $(this).css('border','2px solid green')
            }else {
                $('#canvas-code').prop('placeholder', '验证码位数错误!')
                $(this).css('border','2px solid red')
            }
        }),
        blur:(function(){
            if ($(this).val().length ==4) {
                $(this).css('border','2px solid green')
            }else {
                $('#canvas-code').prop('placeholder', '验证码位数错误!')
                $(this).css('border','2px solid red')
            }
        })
    })

    $('input[name="radio-name"]').eq(0).click(function(){
        $('input[name="radio-name"]').eq(0).attr('checked',true)
        $('input[name="radio-name"]').eq(1).attr('checked',false)
        $('input[name="radio-name"]').eq(2).attr('checked',false)
        $('input[name="radio-name"]').eq(3).attr('checked',false)
            $('#login-user').html(`<p>账号:</p>
        <input type="email" id="email-input" class="form-input" placeholder="使用邮箱格式,如123@163.com">`)
        $('#login').html('学生登录')    
    })
    $('input[name="radio-name"]').eq(1).click(function(){
        $('input[name="radio-name"]').eq(0).attr('checked',false)
        $('input[name="radio-name"]').eq(1).attr('checked',true)
        $('input[name="radio-name"]').eq(2).attr('checked',false)
        $('input[name="radio-name"]').eq(3).attr('checked',false)
        if(user_tab==-1){
            $('#login-user').html(`<p>账号:</p>
        <input type="text" id="user-input" class="form-input" placeholder="请输入账号">`)
        $('#login').html('教师登录')
        }else{
            $('#login-user').html(`<p>账号:</p>
        <input type="text" id="user-input" class="form-input" placeholder="请输入账号" value="`+user_tab+`">`)
        $('#login').html('教师登录')
        }
        
    })
    $('input[name="radio-name"]').eq(2).click(function(){
        $('input[name="radio-name"]').eq(0).attr('checked',false)
        $('input[name="radio-name"]').eq(1).attr('checked',false)
        $('input[name="radio-name"]').eq(2).attr('checked',true)
        $('input[name="radio-name"]').eq(3).attr('checked',false)
        if(user_tab==-1){
            $('#login-user').html(`<p>账号:</p>
        <input type="text" id="user-input" class="form-input" placeholder="请输入账号">`)
        $('#login').html('系统管理员登录')
        }else{
            $('#login-user').html(`<p>账号:</p>
        <input type="text" id="user-input" class="form-input" placeholder="请输入账号" value="`+user_tab+`">`)
        $('#login').html('系统管理员登录')
        }
        
    })
    $('input[name="radio-name"]').eq(3).click(function(){
        $('input[name="radio-name"]').eq(0).attr('checked',false)
        $('input[name="radio-name"]').eq(1).attr('checked',false)
        $('input[name="radio-name"]').eq(2).attr('checked',false)
        $('input[name="radio-name"]').eq(3).attr('checked',true)
        if(user_tab==-1){
            $('#login-user').html(`<p>账号:</p>
        <input type="text" id="user-input" class="form-input" placeholder="请输入账号">`)
        $('#login').html('学校管理员登录')
        }else{
            $('#login-user').html(`<p>账号:</p>
        <input type="text" id="user-input" class="form-input" placeholder="请输入账号" value="`+user_tab+`">`)
        $('#login').html('学校管理员登录')
        }
        
    })

    // 用户登录
    $('#login').click(function(){
        if(getCookie('code')==200 ||getCookie('code')==201||getCookie('code')==202||getCookie('code')==203){
            window.location.href='home.html'
        }else if(emailzz.test($('#email-input').val()) && $('#password-input').val().length < 9 && $('#password-input').val().length > 0 && $("#canvas-code").val()==show_num.join("") && $('input[name="radio-name"]').eq(0).attr('checked')){
            $.ajax({
                type:'POST',
                url:'http://111.229.120.67/gen/login',
                data:{
                    "account":$('#email-input').val(),
                    "role":'student',
                    "password":$('#password-input').val(),
                },
                xhrFields:{
                    withCredentials:true
                },
                success:function(data){
                    console.log(data)
                    if(data.statusCode==0){
                        window.location.href="home.html"
                        setCookie('code',200)
                        setCookie('item-username',data.name)
                    }else{
                        $('#myModal-public').modal({})
                        $('#myModal-public h4').html('登陆失败')
                        $('#myModal-public-body').html('账号或密码错误！')
                        draw(show_num)
                        $('#canvas-code').css({
                            'border': '1px solid #a9a9a9',
                        })
                        $('#canvas-code').prop('placeholder', '请输入验证码')
                        $("#canvas-code").val('')
                    }
                }
            })
        }else if(($('#user-input').val() !== '') && $('#password-input').val().length < 9 && $('#password-input').val().length > 0 && $("#canvas-code").val()==show_num.join("") && $('input[name="radio-name"]').eq(1).attr('checked')){
            $.ajax({
                type:'POST',
                url:'http://111.229.120.67/gen/login',
                data:{
                    "account":$('#user-input').val(),
                    "role":'teacher',
                    "password":$('#password-input').val(),
                },
                xhrFields:{
                    withCredentials:true
                },
                success:function(data){
                    if(data.statusCode==0){
                        window.location.href="home.html"
                        setCookie('code',201)
                        setCookie('item-username',data.name)
                    }else{
                        $('#myModal-public').modal({})
                        $('#myModal-public h4').html('登陆失败')
                        $('#myModal-public-body').html('账号或密码错误！')
                        draw(show_num)
                        $('#canvas-code').css({
                            'border': '1px solid #a9a9a9',
                        })
                        $('#canvas-code').prop('placeholder', '请输入验证码')
                        $("#canvas-code").val('')
                    }
                }
            })
        }else if(($('#user-input').val() !== '') && $('#password-input').val().length < 9 && $('#password-input').val().length > 0 && $("#canvas-code").val()==show_num.join("") && $('input[name="radio-name"]').eq(2).attr('checked')){
            $.ajax({
                type:'POST',
                url:'http://111.229.120.67/gen/login',
                data:{
                    "account":$('#user-input').val(),
                    "role":'admin',
                    "password":$('#password-input').val(),
                },
                xhrFields:{
                    withCredentials:true
                },
                success:function(data){
                    if(data.statusCode==0){
                        window.location.href="home.html"
                        setCookie('code',202)
                        setCookie('admin-name',data.name)
                    }else{
                        $('#myModal-public').modal({})
                        $('#myModal-public h4').html('登陆失败')
                        $('#myModal-public-body').html('账号或密码错误！')
                        draw(show_num)
                        $('#canvas-code').css({
                            'border': '1px solid #a9a9a9',
                        })
                        $('#canvas-code').prop('placeholder', '请输入验证码')
                        $("#canvas-code").val('')
                    }
                }
            })   
        }else if(($('#user-input').val() !== '') && $('#password-input').val().length < 9 && $('#password-input').val().length > 0 && $("#canvas-code").val()==show_num.join("") && $('input[name="radio-name"]').eq(3).attr('checked')){
            $.ajax({
                type:'POST',
                url:'http://111.229.120.67/gen/login',
                data:{
                    "account":$('#user-input').val(),
                    "role":'school',
                    "password":$('#password-input').val(),
                },
                xhrFields:{
                    withCredentials:true
                },
                success:function(data){
                    if(data.statusCode==0){
                        window.location.href="home.html"
                        setCookie('code',203)
                        setCookie('admin-name',data.name)
                    }else{
                        $('#myModal-public').modal({})
                        $('#myModal-public h4').html('登陆失败')
                        $('#myModal-public-body').html('账号或密码错误！')
                        draw(show_num)
                        $('#canvas-code').css({
                            'border': '1px solid #a9a9a9',
                        })
                        $('#canvas-code').prop('placeholder', '请输入验证码')
                        $("#canvas-code").val('')
                    }
                }
            })   
        }else if(!emailzz.test($('#email-input').val())){
            $('#email-input').prop('placeholder', '邮箱格式错误!')
            $('#email-input').css('border','2px solid red')
        }else if($('#password-input').val()=='' || $('#password-input').val().length>9){
            $('#password-input').css({
                'border': '2px solid red',
            })
            $('#password-input').prop('placeholder', '密码格式错误!')
        }
        if($("#canvas-code").val()=='' || $("#canvas-code").val()!=show_num.join("")){
            $('#canvas-code').css({
                'border': '2px solid red',
            })
            $('#canvas-code').prop('placeholder', '验证码错误!')
            draw(show_num)
            $("#canvas-code").val('')
        }
    })
    // --------------------------
})